<template>
  <div class="video-player">
    <el-dialog :width="props.width" :model-value="dialogVisible"
               destroy-on-close
               @update:model-value="(e)=>emits('update:model-value', e)">
      <video controls :height="props.height" poster preload="auto" autoplay crossorigin="anonymous">
        <source src="https://vdn6.vzuu.com/HD/01dbeaac-2766-11ed-8f1e-a23bff412d52-v8_t21-wiDqfZNKrq.mp4?pkey=AAWzv0I1ngiiqSXwib9kCa3niPXj33A6rWLmdDq0hpIGbydIK_m_0oT4A_d9RCxnFIrOEJtpNTb8qCES12enoDOn&c=avc.8.0&f=mp4&pu=1513c7c2&bu=http-1513c7c2&expiration=1683281009&v=ks6&pf=Web&pt=zhihu" type="video/mp4">
      </video>
      <div class="close" :style="btnStyle"
           @click="()=>emits('update:model-value',false)"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, ref } from 'vue';
import { isWap } from '@/utils/ua';

const props = defineProps({
  width: {
    type: Number,
    default: 1200,
  },
  height: {
    type: Number,
    default: 675,
  },
  modelValue: {
    type: Boolean,
    required: true,
  },
});

const emits = defineEmits(['update:model-value']);
const btnStyle = ref(isWap() ? {} : { width: '36px', height: '36px', top: '-18px', right: '-18px' });

const dialogVisible = computed<boolean>(() => props.modelValue);
</script>
<style lang="less" scoped>
.video-player {
  @keyframes dialog-open {
    0% {
      opacity: 0;
      transform: translate(0%, 0%);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  ::v-deep(.el-dialog) {
    .el-dialog__header {
      display: none;
    }

    // dialog页面居中
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);

    .el-dialog__body {
      flex: 1;
      overflow: auto;
      padding: 0;
      display: flex;

      video {
        height: 100%;
        width: 100%;
      }

      .close {
        cursor: pointer;
        position: absolute;
        width: 36px;
        height: 36px;
        top: -18px;
        right: -18px;
        border-radius: 50%;
        background: url("@/assets/web/svgs/close.svg") no-repeat #FFFFFF;
        background-size: 100%;
      }
    }
  }

  .dialog-fade-enter-active {
    .el-dialog.center {
      animation: dialog-open linear;
    }
  }

  .dialog-fade-leave-active {
    .el-dialog.center {
      animation: dialog-open linear reverse;
    }
  }
}
</style>
